<template>
  <div class="container_box">
    <div
      class="verify-character"
      :style="{ width: `${contentWidth}px;` }"
      @click="verifyRefresh"
    >
      <canvas
        class="canvas_character"
        ref="canvas_character"
        :width="contentWidth"
        :height="contentHeight"
        @click="getResult"
      >
      </canvas>
    </div>
  </div>
</template>
<script setup>
import { onMounted, ref, defineProps, defineEmits } from "vue";

const props = defineProps({
  contentWidth: {
    type: Number,
    default: 90,
  },
  contentHeight: {
    type: Number,
    default: 40,
  },
});
const emit = defineEmits(["returnRes"]);
const show_num = ref([]);
let canvas_character = ref("");
let result = ref("");

const drawPic = (show_num) => {
  let canvas_width = props.contentWidth;
  let canvas_height = props.contentHeight;
  let canvas = canvas_character.value; // 获取到canvas的对象
  let ctx = canvas.getContext("2d"); // 获取到canvas画图的环境
  canvas.width = canvas_width;
  canvas.height = canvas_height;
  console.log(canvas_height, canvas_width);
  let sCode =
    "a,b,c,d,e,f,g,h,i,j,k,j,h,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,F,G,H,L,J,K,I,M,N,O,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0";
  let aCode = sCode.split(",");
  let aLength = aCode.length; // 获取到数组的长度
  for (let i = 0; i < 4; i++) {
    // 循环控制验证码位数
    let j = Math.floor(Math.random() * aLength); // 获取到随机的索引值
    let deg = Math.random() - 0.5; // 产生一个随机弧度
    let txt = aCode[j]; // 得到随机的一个内容
    show_num[i] = txt;
    let x = 10 + i * 20; // 文字在canvas上的坐标
    let y = 20 + Math.random() * 8; // 文字在canvas上的坐标
    ctx.font = "bold 23px 微软雅黑";
    ctx.clearRect(x, y, canvas_width, canvas_height); // 清空之前绘制的矩形,释放空间
    ctx.fillStyle = randomColor(0, 255, 0.2); // 填充颜色
    ctx.fillRect(0, 0, canvas_width, canvas_height); //绘制矩形
    ctx.translate(x, y);
    ctx.rotate(deg);
    ctx.fillStyle = randomColor(0, 255, 1);
    ctx.fillText(txt, 0, 0);
    ctx.rotate(-deg);
    ctx.translate(-x, -y);
  }
  for (let i = 0; i <= 5; i++) {
    //验证码上显示线条
    ctx.strokeStyle = randomColor(0, 255, 1);
    ctx.beginPath();
    ctx.moveTo(Math.random() * canvas_width, Math.random() * canvas_height);
    ctx.lineTo(Math.random() * canvas_width, Math.random() * canvas_height);
    ctx.stroke();
  }
  for (let i = 0; i <= 30; i++) {
    //验证码上显示小点
    ctx.strokeStyle = randomColor(0, 255, 1);
    ctx.beginPath();
    let x = Math.random() * canvas_width;
    let y = Math.random() * canvas_height;
    ctx.moveTo(x, y);
    ctx.lineTo(x + 1, y + 1);
    ctx.stroke();
  }
};
onMounted(() => {
  drawPic(show_num.value);
});
// 点击刷新验证码
const verifyRefresh = () => {
  drawPic(show_num.value);
};
// 获取随机颜色
const randomColor = (min, max, a) => {
  let r = randomNum(min, max);
  let g = randomNum(min, max);
  let b = randomNum(min, max);
  return `rgba(${r},${g},${b},${a})`;
};
// 获取随机数
const randomNum = (min, max) => {
  return Math.floor(Math.random() * (max - min) + min);
};
// 获取验证结果
const getResult = () => {
  result.value = show_num.value.join(" ");
  emit("returnRes", result.value);
};
</script>
<style lang="scss" scoped></style>
